<template>
  <div class="home">
    <el-container class="container">
      <el-header class="header">
        <div class="nav">
          <img src="../assets/contact.png" alt="" />
          <h4 class="contact">contact us at XXXX@XX.com</h4>
        </div>
        <div class="link">
          <ul>
            <span class="relative">relational database</span>
            <li><a href="https://www.ncbi.nlm.nih.gov/" target="_blank">NCBI</a></li>
            <li><a href="http://www.informatics.jax.org/" target="_blank">MGI</a></li>
            <li><a href="https://www.omim.org/" target="_blank">OMIM</a></li>
          </ul>
          <a href="/Login"><img src="../assets/user.png" alt="" /></a>
        </div>
      </el-header>
      <el-main>
        <div>
          <h4 class="mouse">MOUSE</h4>
          <h4 class="title">
            Specialized data sets of alleles and corresponding phenotypes in genetically modified mice
          </h4>
        </div>
        <el-form :inline="true" :model="form" label-width="120px">
          <el-form-item>
            <el-select v-model="value" class="select" placeholder="Please select">
              <el-option
                class="options"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.search"
              class="input"
              placeholder="Please enter the information you want to search"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="button" type="primary" :icon="Search" @click="onSubmit">Search</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import router from '../router'

const value = ref('')
const input = ref('')

const options = [
  {
    value: 'gene category',
    label: 'gene category'
  },
  {
    value: 'mouse genotype',
    label: 'mouse genotype'
  },
  {
    value: 'double alleles',
    label: 'double alleles'
  },
  {
    value: 'gene allele',
    label: 'gene allele'
  }
]

const form = reactive({
  search: ''
})

const onSubmit = () => {
  console.log(form.search)
  router.push('/SearchGeneCategory')
}
</script>

<style scoped>
.container {
  background: url('../assets/background.png') no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  top: 0;
  left: 0;
  background-size: cover;
  position: fixed;
}

.contact {
  font-weight: 400px;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  color: #dcfafd;
}

.header {
  height: 90px;
  width: 100%;
  background-color: #476586;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
}

.relative {
  color: #fbfcfd;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  margin-right: 20px;
}

.nav,
.link {
  font-size: 20px;
  display: flex;
  align-items: center;
}

ul {
  list-style: none;
  margin-left: 50px;
}

li {
  display: inline;
}

li > a {
  line-height: 40px;
  color: #fbfcfd;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  padding: 32.5px 20px;
}

a:hover {
  background-color: #0c4469;
}

.mouse {
  font-size: 120px;
  color: #0d3144;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.title {
  color: #fbfcfd;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-bottom: 50px;
}

.select {
  padding: auto;
  width: 150px;
  color: #415058;
  margin-left: 378px;
  margin-right: -20px;
}

.options {
  padding: auto;
  display: block;
  width: 180px;
}

.input {
  width: 470px;
  margin-right: -20px;
}

.input :deep() .el-input__inner {
  height: 40px;
}

.select :deep() .el-input__inner {
  height: 40px;
}

.el-button {
  height: 40px;
}
</style>
